<template>
  <div class="lotteryFreeBox">
    <!-- 礼物+标题 -->
    <div
      class="lotteryFreeBox-bg"
      :class="{
        'lotteryFreeBox-bg-start': isStart || freeAmount100 || betLint,
      }"
      @animationend="lotteryFreeBoxEnd"
    >
      <img
        class="lotteryFreeBox-bg-img"
        src="/image/inviteFriends/free-lwbg-icon.svg"
      />
      <img
        class="lotteryFreeBox-bg-lw"
        src="/image/inviteFriends/free-lw-icon.png"
      />
      <div v-if="!isAnimationEnd" class="lotteryFreeBox-bg-text">
        {{ $t("lotteryMoney.mfcjcs") }}
      </div>
      <!-- 免费数量 -->
      <div v-if="lottery.freeDrawCount" class="lotteryFreeBox-bg-tag">
        {{ lottery.freeDrawCount }}
      </div>
    </div>
    <!-- 内容 -->
    <div v-if="isAnimationEnd" class="content items-center">
      <div>{{ $t("lotteryMoney.hyzldmfcj") }}</div>
      <img class="content-xx1" src="/image/inviteFriends/free-lwxx-icon.png" />
      <img class="content-xx2" src="/image/inviteFriends/free-lwxx-icon.png" />
    </div>
  </div>
</template>
<script setup lang="ts" name="lotteryFreeBox">
import { useEventBus } from "@vueuse/core";
import { useUserStore } from "~~/store/modules/user";

const props = defineProps<{
  lottery: any;
}>();

// const emit = defineEmits(["="]);
const userStore = useUserStore();

// 定时器-通知
let unsubscribe: any = null; // 定时器通知对象
const moneyInterval = useEventBus("lottery-money-interval-emit");

// 用户 今日累计下注达到上限,做一次动画
const betLint = ref(false);
const betLintWatch = watch(
  () => props.lottery,
  (newVal) => {
    // console.log("当前下注了几次", newVal.sessionDrawCount);
    if (
      !validatenull(newVal.maxSessionDrawCount) &&
      Number(newVal.sessionDrawCount) >= Number(newVal.maxSessionDrawCount)
    ) {
      setTimeout(() => {
        betLint.value = true;
      }, 600);
    }
  },
  {
    deep: true,
  }
);

// 动画结束
const isAnimationEnd = ref(false);
const lotteryFreeBoxEnd = () => {
  // console.log("--动画结束--");
  isAnimationEnd.value = true;
};
// 5 秒后消失动画
const isAnimationEndWatch = watch(
  () => isAnimationEnd.value,
  (newVal) => {
    if (newVal) {
      setTimeout(() => {
        isAnimationEnd.value = false;
        isStart.value = false;
        freeAmount100.value = false;
        betLint.value = false;
      }, 5000);
    }
  }
);

// 可用余额 小于 100BDC 展示动画
const freeAmount100 = ref(false);
const freeAmountWatch = watch(
  () => userStore.$state.freeAmount,
  (newVal) => {
    // console.log("当前账户的 BDC 可用余额", newVal);
    if (Number(newVal) < 100) {
      setTimeout(() => {
        freeAmount100.value = true;
      }, 500);
    }
  },
  {
    immediate: true,
  }
);

// 是否开始动画
const isStart = ref(false);
const firstTime = 10 * 60 * 1000; // 开始后 10 分钟
const secondTime = 20 * 60 * 1000;
const thirdTime = 30 * 60 * 1000;
onMounted(async () => {
  // 1. 统一的定时器,通知,组件加载的时候只初始化一次
  if (!unsubscribe) {
    unsubscribe = moneyInterval.on((val: any) => {
      // console.log("lotteryFreeBox: ", val);
      if (props.lottery && props.lottery.beginTime) {
        if (
          val > Number(props.lottery.beginTime) + firstTime &&
          val < Number(props.lottery.beginTime) + firstTime + 5000
        ) {
          isStart.value = true;
        } else if (
          val > Number(props.lottery.beginTime) + secondTime &&
          val < Number(props.lottery.beginTime) + secondTime + 5000
        ) {
          isStart.value = true;
        } else if (
          val > Number(props.lottery.beginTime) + thirdTime &&
          val < Number(props.lottery.beginTime) + thirdTime + 5000
        ) {
          isStart.value = true;
        }
      }
    });
  }
});

onBeforeUnmount(() => {
  if (unsubscribe) unsubscribe(); // 注销通知
  freeAmountWatch && freeAmountWatch();
  isAnimationEndWatch && isAnimationEndWatch();
  betLintWatch && betLintWatch();
});
</script>
<style scoped lang="scss">
@keyframes lwoffset {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(55px);
  }
}
.lotteryFreeBox {
  position: fixed;
  z-index: 29;
  bottom: 200 * 2px;
  right: 0;
  &-bg {
    position: relative;
    z-index: 9;
    height: 36 * 2px;
    width: 90 * 2px;

    &-tag {
      position: absolute;
      top: -3 * 2px;
      left: -10 * 2px;
      z-index: 9;
      padding: 1 * 2px 4 * 2px;
      background-color: #ff4040;
      border-radius: 30 * 2px;
      border: 1px solid #fff;
      box-shadow: 0px 8px 8px 0px rgba(196, 30, 0, 0.4);

      font-size: 10 * 2px;
      color: #fff;
      font-weight: 500;
    }
    &-start {
      animation: lwoffset 0.5s ease-in-out forwards;
    }

    &-img {
      height: 36 * 2px;
    }
    &-lw {
      position: absolute;
      top: 0 * 2px;
      left: -16 * 2px;
      height: 45 * 2px;
    }
    &-text {
      width: 86%;
      margin-left: 7%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      text-align: center;
      font-size: 11 * 2px;
      font-style: normal;
      font-weight: 860;
      background: linear-gradient(286deg, #df7b00 9.11%, #7c4038 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  &-point {
    position: absolute;
    top: 0;
    left: 0;
    width: 8 * 2px;
    width: 8 * 2px;
  }
}
.content {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4 * 2px 40 * 2px 4 * 2px 10 * 2px;
  background: linear-gradient(270deg, #f38721 15.1%, #ffa201 102.08%);
  border: 2.5 * 2px solid #ffd89b;
  backdrop-filter: blur(5px);
  border-radius: 100px;

  font-size: 11 * 2px;
  color: #fff;
  font-weight: 590;
  width: 260 * 2px;
  min-height: 37 * 2px;

  &-xx1 {
    position: absolute;
    top: -6 * 2px;
    right: 45 * 2px;
    width: 10 * 2px;
    height: 10 * 2px;
    transform: rotate(45deg);
  }
  &-xx2 {
    position: absolute;
    top: 50%;
    left: -8 * 2px;
    width: 16 * 2px;
    height: 16 * 2px;
    transform: translateY(-50%);
  }
}
</style>
